// 各地市交易中心和办事指南
<template>
    <div class="jyzx-and-bszn">
        <div class="jyzx-main" >
            <div class="jyzx-select">
                <div>
                    省份：
                    <noSortSelect v-model="pageProvinceCode" :props="{value:'code',label:'city'}"  :data="prolist"  size="mini" :clearable='false'
                        @select='getProvinceCodeSelect' 2way="pageProvinceName" :pageProvinceName.sync="pageProvinceName" :isNeedSort="false">
                    </noSortSelect>
                </div>
                <div>
                   城市：
                    <noSortSelect v-model="cityCode" :props="{value:'code',label:'city'}"  :data="citylist"  size="mini" :clearable='false'
                        @select='getCityCodeSelect'>
                    </noSortSelect> 
                </div>
               <div>
                    区县：
                    <noSortSelect v-model="countyCode" :props="{value:'code',label:'city'}"  :data="countyList"  size="mini" :clearable='false'
                        @select='getCountyCodeSelect'>
                    </noSortSelect>
               </div>
            </div>
            
            <div class="main-map">
                <aMap :pageProvinceName="pageProvinceName"> </aMap>
            </div>
        </div>
        
        <trading-detail :code="detailCode" :full-city-name="fullCityName"></trading-detail>
    </div>
</template>

<script>
import citySelect from '../components/city-select.vue'
import tradingDetail from '../components/detail.vue';
import aMap from './map/map.vue';
import noSortSelect from './no-sort-select.vue';

import { mapGetters ,mapMutations  } from 'vuex';

export default {
    head: {},
    props: {},
    components: {
        tradingDetail,
        citySelect,
        aMap,
        noSortSelect,
    },
    data: () => ({
        targetData: {},
        cityName:'石家庄市',
        cityCode:'130100',
        countyList:[],
        countyCode:'',
        detailCode:'',
        provinceList:[],   //省 之前的list

        fontCityName:'',
        endCountyName:'',

        pageProvinceName:"河北省",
        pageProvinceCode:'130000',
        prolist:[],
        citylist:[],
    }),
    computed: {
        ...mapGetters({
            usersProvince: 'city/usersProvince',
            navigateData: 'navigate/navigateData',
        }),
        fullCityName:function(){
            if(!!this.fontCityName && !!this.endCountyName){
                if(this.fontCityName == this.endCountyName) {
                    return this.fontCityName + '交易中心及办事指南详情';
                } else{
                    return this.fontCityName + this.endCountyName + '交易中心及办事指南详情';
                }
            } else{
                return '';
            }
        },
    },
    watch: {
        countyCode:{
            handler(n,o){
                if(n){
                    this.detailCode = n;
                }
            },
            deep:true,
            immediate:true,
        },
    },
    methods: {
        /**
         * 埋点
         */
        point(item) {
            this.$ajax({
                type: 'post',
                url: `${this.$store.state.api.tbUrl}/home/navigateclick.json`,
                data: {
                    name: item.city,
                    type: item.type,
                    id: item.code,
                },
                callback: function (data, res) {},
                error: function () {},
            });
        },

        /**
         * 城市排序
         */
        sortNew(arr, cityname , cityCode){
            let list = arr.sort((a, b)=> a.city.localeCompare(b.city, 'zh')); //a~z 排序
            var targetIndex = (list|| []).findIndex((a) => a.city === cityname);
            let targetData = list[targetIndex];

            if(targetIndex == -1) {return};
            list.splice(targetIndex, 1);
            list.unshift(targetData);
            return list;
        },

        //选择省份
        getProvinceCodeSelect(val){
            this.pageProvinceName = val.city;
            this.pageProvinceCode = val.code;
            // 换城市
            if(!val.children) {
                // showMsg("children 为空" );
                this.cityCode = '';
                this.countyCode = '';
                this.detailCode = val.code;
                this.citylist = [];
                this.countyList = [];
                this.fontCityName = val.city;
                this.endCountyName = val.city;
                return;
            };
            this.cityName = val.children[0].city,
            this.cityCode = val.children[0].code,
            this.citySort();
        },

        getCityCodeSelect(val){
            this.cityCode = val.code;
            if(!val.children){
                this.countyCode = '';
                this.detailCode = val.code;
                this.countyList = [];
                this.fontCityName = val.city;
                this.endCountyName = val.city;
                return;
            }
            this.countyChange(val);
        },

        getCountyCodeSelect(val){
            this.countyCode = val.code;
            this.endCountyName = val.city;
            this.point(val);
        },

        changeCityCode(val){
            this.cityCode =  val.code;
        },

        //省排序
        proSort(){
            var list = clone(this.navigateData.jyzxlist);
            if (!this.pageProvinceName) {
                return this.prolist = list;
            }
            this.sortNew(list ,this.pageProvinceName);

            //设置默认
            this.prolist = list;

        },
        citySort() {
            var curProvince = this.navigateData.jyzxlist.find(val => val.city == this.pageProvinceName ),
                tarlist = curProvince?.children || [];

            var citylist = clone(tarlist);

            if (!this.cityName ) {
                return this.citylist = citylist;
            }
            this.sortNew(citylist ,this.cityName , this.cityCode );
            this.citylist = citylist;
            //设置默认 区县
            this.countyChange(citylist[0]);
        },

        countyChange (val){
            this.countyList = val.children;
            this.countyCode = val.children[0].code;
            this.fontCityName = val.city;
            this.endCountyName = val.children[0].city;
        },

    },
    mounted() {
        this.pageProvinceName = this.usersProvince.valuename;
        this.pageProvinceCode = this.usersProvince.valueid;
        //省份 排序
        this.proSort();
        //城市 排序
        this.citySort();
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.jyzx-and-bszn {
    width: 100%;
    min-height: 300px;
    .jyzx-main{
        display: flex;
        position: relative;
        width: 100%;
        margin-bottom: 14px;

        ::v-deep{
            .el-input__inner{
                width: 114px;
            }
        }
        .jyzx-select{
            width: 520px;
            display: flex;
            justify-content: space-between;
        }

        .main-map{
            width: 400px !important;
            height: 300px;
            overflow: hidden;
            // border: 1px solid;
            position: absolute;
            right: 0;
            top: 0;
        }
    }
    


}
</style>
